﻿<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.js"></script>

<style>
    .line {
        flex-direction: column;
    }

    .pie {
        flex-direction: column;
    }

</style>

<div class="line five flex">
    <div class="tx">
        <div id="myline" style="width: 600px;height:400px; margin: 82px auto;"></div>
    </div>
</div>


<div class="pie five flex">
    <div class="tx">
        <div id="mypie" style="width: 600px;height:400px; margin: 82px auto;"></div>
    </div>
</div>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myLineChart = echarts.init(document.getElementById('myline'));
    var myPieChart = echarts.init(document.getElementById('mypie'));

    $.get("api/record/allLineData",
        function (res) {
            console.log(res);

            let lineOption = {
                title: {
                    text: '评教得分综合走势'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['优秀', '良好', '一般', '较差']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: res.lineData.studyYear,
                    axisLabel: {
                        rotate:50
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '优秀',
                        type: 'line',
                        smooth: true,
                        data: res.lineData.l1
                    },
                    {
                        name: '良好',
                        type: 'line',
                        smooth: true,
                        data: res.lineData.l2
                    },
                    {
                        name: '一般',
                        type: 'line',
                        smooth: true,
                        data: res.lineData.l3
                    },
                    {
                        name: '较差',
                        type: 'line',
                        smooth: true,
                        data: res.lineData.l4
                    }

                ]
            };

            let pieOption = {
                title: {
                    text: '教师评教比例',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%) <br/> 单击可筛选'
                },
                legend: {
                    type: 'plain',
                    orient: 'vertical',
                    right: 10,
                    top: 60,
                    bottom: 20
                },
                series: [
                    {
                        name: '所占比例',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: res.pieData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myLineChart.setOption(lineOption);
            myPieChart.setOption(pieOption);
        });

</script>